<template>
  <!-- 主内容区域 -->
  <div class="main-content">
    <div class="page-title">内容列表</div>

    <!-- 内容筛选区域 -->
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">

        <div class="filter-row">
          <el-form-item class="list-search-three">
            <el-select v-model="filter.sort" placeholder="请选择排序方式">
              <template #prefix>
                <div class="ml-2">
                  <span>排序方式</span>
                  <el-divider direction="vertical"></el-divider>
                </div>
              </template>
              <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="list-search-three">
            <el-select v-model="filter.status" placeholder="请选择发布状态">
              <template #prefix>
                <div class="ml-2">
                  <span>发布状态</span>
                  <el-divider direction="vertical"></el-divider>
                </div>
              </template>
              <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="list-search-three">
            <el-select v-model="filter.type" placeholder="请选择内容类型">
              <template #prefix>
                <div class="ml-2">
                  <span>内容类型</span>
                  <el-divider direction="vertical"></el-divider>
                </div>
              </template>
              <el-option
                  v-for="item in sortingOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

        </div>
        <div class="filter-row">
          <el-form-item>
            <el-input
                v-model="filter.title"
                placeholder="填写订单号"
                class="search-input-77 mr-3"
            >
              <template #prefix>
                <span>订单号</span>
                <el-divider direction="vertical"></el-divider>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div
                class="list-search-one-right flex justify-between cursor-pointer"
                @click="toggleClass"
                :class="{ 'list-search-one-change': isSelected }"
            >
              <div class="flex items-center">
                <div class="right-time ml-1 w-20">发布日期</div>
                <div class="right-change">
                  <el-date-picker
                      v-model="filter.dateRange"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      align="right"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="mr-5">
                <i class="el-icon-date text-gray-400"></i>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="filter-item" style="display: flex; align-items: flex-end;">
              <el-button class="screen-button" type="primary" @click="handleFilter">筛选</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 内容列表表格 -->
    <div class="content-table-container">
      <div class="table-header">
        <div class="table-title">内容列表</div>
        <div class="table-actions">
          <el-button size="small" type="primary" @click="handleCreate">
            <i class="fa-solid fa-plus"></i> 发布内容
          </el-button>
          <el-button size="small" type="danger" @click="handleBatchDelete">
            <i class="fa-solid fa-trash"></i> 批量删除
          </el-button>
          <el-button size="small" @click="handleExport">
            <i class="fa-solid fa-download"></i> 导出数据
          </el-button>
        </div>
      </div>

      <el-table :data="contentList" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="ID" width="80">
          <template #default="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="内容" min-width="200">
          <template #default="scope">
            <div class="flex items-center gap-3">
              <img :src="scope.row.thumbnail" alt="内容缩略图" class="content-thumbnail">
              <div>
                <div class="font-medium">{{ scope.row.title }}</div>
                <div class="text-sm text-gray-500 mt-1">
                  {{ scope.row.category }} · {{ scope.row.typeText }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="views" label="浏览量" width="100"></el-table-column>
        <el-table-column prop="likes" label="点赞数" width="100"></el-table-column>
        <el-table-column prop="comments" label="评论数" width="100"></el-table-column>
        <el-table-column prop="shares" label="分享数" width="100"></el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <span class="status-tag" :class="getStatusClass(scope.row.status)">{{ scope.row.statusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布日期" width="140">
          <template #default="scope">
            {{ scope.row.publishDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handlePreview(scope.row)">预览</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                       :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "List-View",
  layout: "admin",
  data() {
    return {
      value: "选项1",
      isSelected: false,
      labelPosition: "right",
      activeMenu: 'content-list',
      filter: {
        title: '',
        type: '',
        status: '',
        dateRange: [],
        sort: ''
      },
      typeOptions: [
        {
          value: "选项1",
          label: "图文",
        },
        {
          value: "选项2",
          label: "视频",
        },
        {
          value: "选项3",
          label: "直播",
        },
      ],
      statusOptions: [
        {
          value: "选项1",
          label: "已发布",
        },
        {
          value: "选项2",
          label: "待审核",
        },
        {
          value: "选项3",
          label: "已驳回",
        },
        {
          value: "选项3",
          label: "已下架",
        },
      ],
      sortingOptions: [
        {
          value: "选项1",
          label: "最新发布",
        },
        {
          value: "选项2",
          label: "最多浏览",
        },
        {
          value: "选项3",
          label: "最多点赞",
        },
        {
          value: "选项3",
          label: "最多评论",
        },
      ],
      contentList: [
        {
          id: 1,
          title: "2025年最流行的穿搭风格",
          type: "image-text",
          typeText: "图文",
          category: "时尚穿搭",
          thumbnail: "https://picsum.photos/id/26/200/200",
          views: 12456,
          likes: 3254,
          comments: 124,
          shares: 86,
          status: "published",
          statusText: "已发布",
          publishDate: "2025-05-15"
        },
        {
          id: 2,
          title: "夏日必备的5款防晒霜评测",
          type: "video",
          typeText: "视频",
          category: "美妆护肤",
          thumbnail: "https://picsum.photos/id/24/200/200",
          views: 8645,
          likes: 2154,
          comments: 96,
          shares: 42,
          status: "published",
          statusText: "已发布",
          publishDate: "2025-05-12"
        },
        {
          id: 3,
          title: "新手化妆技巧大公开",
          type: "image-text",
          typeText: "图文",
          category: "美妆护肤",
          thumbnail: "https://picsum.photos/id/25/200/200",
          views: 6542,
          likes: 1568,
          comments: 78,
          shares: 35,
          status: "pending",
          statusText: "待审核",
          publishDate: "2025-05-10"
        },
        {
          id: 4,
          title: "平价好用的美妆工具推荐",
          type: "image-text",
          typeText: "图文",
          category: "美妆护肤",
          thumbnail: "https://picsum.photos/id/28/200/200",
          views: 4562,
          likes: 985,
          comments: 42,
          shares: 21,
          status: "rejected",
          statusText: "已驳回",
          publishDate: "2025-05-08"
        },
        {
          id: 5,
          title: "教你打造自然清透的底妆",
          type: "video",
          typeText: "视频",
          category: "美妆护肤",
          thumbnail: "https://picsum.photos/id/29/200/200",
          views: 3254,
          likes: 756,
          comments: 32,
          shares: 18,
          status: "offline",
          statusText: "已下架",
          publishDate: "2025-05-05"
        },
        {
          id: 6,
          title: "如何拍出高质量的小红书照片",
          type: "image-text",
          typeText: "图文",
          category: "摄影技巧",
          thumbnail: "https://picsum.photos/id/30/200/200",
          views: 2856,
          likes: 654,
          comments: 28,
          shares: 15,
          status: "published",
          statusText: "已发布",
          publishDate: "2025-05-03"
        },
        {
          id: 7,
          title: "5款超火的国货美妆品牌推荐",
          type: "image-text",
          typeText: "图文",
          category: "美妆护肤",
          thumbnail: "https://picsum.photos/id/31/200/200",
          views: 2456,
          likes: 568,
          comments: 24,
          shares: 12,
          status: "published",
          statusText: "已发布",
          publishDate: "2025-05-02"
        },
        {
          id: 8,
          title: "夏日清新妆容教程",
          type: "video",
          typeText: "视频",
          category: "美妆护肤",
          thumbnail: "https://picsum.photos/id/32/200/200",
          views: 2154,
          likes: 486,
          comments: 21,
          shares: 10,
          status: "pending",
          statusText: "待审核",
          publishDate: "2025-05-01"
        },
        {
          id: 9,
          title: "适合学生党的平价穿搭",
          type: "image-text",
          typeText: "图文",
          category: "时尚穿搭",
          thumbnail: "https://picsum.photos/id/33/200/200",
          views: 1856,
          likes: 425,
          comments: 18,
          shares: 8,
          status: "published",
          statusText: "已发布",
          publishDate: "2025-04-30"
        },
        {
          id: 10,
          title: "如何打造适合圆脸的发型",
          type: "image-text",
          typeText: "图文",
          category: "发型设计",
          thumbnail: "https://picsum.photos/id/34/200/200",
          views: 1654,
          likes: 385,
          comments: 16,
          shares: 7,
          status: "published",
          statusText: "已发布",
          publishDate: "2025-04-28"
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      total: 50,
      currentPage: 1,
      pageSize: 10,
      multipleSelection: [],
      deleteDialogVisible: false
    }
  },
  watch: {
    value2(newValue, oldValue) {
      if (newValue || oldValue) {
        this.isSelected = false;
      }
    },
  },
  methods: {
    toggleClass() {
      this.isSelected = !this.isSelected;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getStatusClass(status) {
      if (status === 'published') {
        return 'success';
      } else if (status === 'pending') {
        return 'pending';
      } else if (status === 'rejected') {
        return 'error';
      } else if (status === 'offline') {
        return 'warning';
      }
      return '';
    },
    handleFilter() {
      console.log('筛选内容', this.filter);
      // 这里应该调用API获取筛选后的内容列表
    },
    resetFilter() {
      this.filter = {
        title: '',
        type: '',
        status: '',
        dateRange: [],
        sort: ''
      };
    },
    handleCreate() {
      console.log('发布内容');
      // 跳转到发布内容页面
    },
    handleEdit(row) {
      console.log('编辑内容', row);
      // 跳转到编辑内容页面
    },
    handlePreview(row) {
      console.log('预览内容', row);
      // 预览内容
    },
    handleDelete(row) {
      this.multipleSelection = [row];
      this.deleteDialogVisible = true;
    },
    handleBatchDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请先选择要删除的内容');
        return;
      }
      this.deleteDialogVisible = true;
    },
    handleExport() {
      console.log('导出数据');
      // 导出内容数据
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    confirmDelete() {
      console.log('删除选中的内容', this.multipleSelection);
      // 调用API删除选中的内容
      this.deleteDialogVisible = false;
      this.$message.success('内容删除成功');
      // 更新内容列表
      this.contentList = this.contentList.filter(item => {
        return !this.multipleSelection.some(selection => selection.id === item.id);
      });
      this.multipleSelection = [];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      // 调用API获取新的内容列表
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      // 调用API获取新的内容列表
    }
  }
};
</script>

<style scoped lang="scss">
/* 内容列表表格 */
.content-table-container {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.el-table th {
  background-color: #F8F8F8;
  font-weight: 500;
}

.el-table .cell {
  padding: 12px 0;
}

.content-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.success {
  background-color: rgba(0, 180, 42, 0.1);
  color: #00B42A;
}

.status-tag.warning {
  background-color: rgba(255, 178, 36, 0.1);
  color: #FFB224;
}

.status-tag.error {
  background-color: rgba(245, 63, 63, 0.1);
  color: #F53F3F;
}

.status-tag.pending {
  background-color: rgba(144, 147, 153, 0.1);
  color: #909399;
}

/* 分页区域 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.filter-row {
  align-items: center;

}

.filter-item {
  margin-right: 10px;
}

.list-search-one-change {
  border: 1px #e18634 solid;
}

.list-search-one-right {
  width: 100%;
  height: 40px;
  border: #dddfe6 1px solid;
  border-radius: 10px;
  display: flex;
  align-items: center;
  background-color: white;
  padding-left: 10px;

  .right-time {
    color: #c0c4cc;
    height: 14px;
    padding-right: 10px;
    line-height: 14px;
    border-right: 1px solid #dddfe6;
  }

  ::v-deep .el-input__inner {
    -webkit-appearance: none;
    background-color: #ffffff00;
    background-image: none;
    border-radius: 10px;
    border: 1px solid #3b5cab00;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 25px;
    line-height: 30px;
    margin-top: -8px;
    outline: none;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
  }

  ::v-deep .el-range-editor.is-active {
    border-color: rgba(233, 132, 25, 0);
  }

  ::v-deep .el-icon-time:before {
    width: 10px;
    content: "";
    color: #faebd700;
    /* background-color: aqua; */
  }
}

.list-search-three {
  ::v-deep .el-input__prefix {
    left: 11px;
  }

  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 97px;
    border-radius: 10px;
  }

  ::v-deep .el-select > .el-input {
    display: block;
    width: 320px;

  }
}
</style>
